<template>
  <div class="dashboard-layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <h2>电商数据采集分析</h2>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        router
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409eff"
      >
        <el-menu-item index="/">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <!-- <el-menu-item index="/process">
          <el-icon><List /></el-icon>
          <span>流程管理</span>
        </el-menu-item> -->
        <el-menu-item index="/wingknife">
          <el-icon><Operation /></el-icon>
          <span>流程管理</span>
        </el-menu-item>
        <el-menu-item index="/wingknife/executions">
          <el-icon><Timer /></el-icon>
          <span>运行管理</span>
        </el-menu-item>
        
        <!-- <el-sub-menu index="/config">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>配置管理</span>
          </template>
          <el-menu-item index="/config/brands">
            <el-icon><ShoppingBag /></el-icon>
            <span>品牌管理</span>
          </el-menu-item>
          <el-menu-item index="/config/product-names">
            <el-icon><Shopping /></el-icon>
            <span>商品名称管理</span>
          </el-menu-item>
          <el-menu-item index="/config/units">
            <el-icon><ScaleToOriginal /></el-icon>
            <span>单位管理</span>
          </el-menu-item>
          <el-menu-item index="/config/marketing-words">
            <el-icon><Promotion /></el-icon>
            <span>营销词管理</span>
          </el-menu-item>
          <el-menu-item index="/config/system">
            <el-icon><Tools /></el-icon>
            <span>系统配置</span>
          </el-menu-item>
        </el-sub-menu> -->

   
        <el-menu-item index="/data-clean">
          <el-icon><DataAnalysis /></el-icon>
          <span>数据清洗</span>
        </el-menu-item>
        
        <el-menu-item index="/brand-extractor">
          <el-icon><MagicStick /></el-icon>
          <span>品牌提取</span>
        </el-menu-item>
        
        <el-menu-item index="/sku">
          <el-icon><Box /></el-icon>
          <span>SKU管理</span>
        </el-menu-item>

        <el-menu-item index="/item">
          <el-icon><Goods /></el-icon>
          <span>商品列表</span>
        </el-menu-item>

        <!-- <el-menu-item index="/automation">
          <el-icon><Monitor /></el-icon>
          <span>浏览器自动化</span>
        </el-menu-item> -->
        <!-- <el-menu-item index="/settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item> -->

        <el-menu-item index="/config/brands">
          <el-icon><Setting /></el-icon>
          <span>配置管理</span>
        </el-menu-item>

        
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="breadcrumb">
          <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="route.name !== 'DashboardHome'">
              {{ getBreadcrumbTitle() }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-menu">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-avatar :size="32" :src="userAvatar">{{ userName?.charAt(0) }}</el-avatar>
              <span>{{ userName }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 路由视图 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { HomeFilled, List, Setting, Monitor, Operation, DataAnalysis, ShoppingBag, Shopping, ScaleToOriginal, Promotion, Tools, Timer, MagicStick, Goods } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { sanitizeObjectKeys } from '@/utils'

const route = useRoute()
const router = useRouter()
const store = useStore()

// 计算当前激活的菜单项
const activeMenu = computed(() => route.path)

// 用户信息 - 使用计算属性从 store 获取
const userName = computed(() => {
  const user = store.getters.user
  return user?.username || '用户'
})
const userAvatar = ref('')

// 获取面包屑标题
const getBreadcrumbTitle = () => {
  switch (route.name) {
    case 'ProcessList':
      return '流程管理'
    case 'ProcessEditor':
      return '流程编辑'
    case 'Settings':
      return '系统设置'
    case 'WingknifeProcess':
      return '影刀流程管理'
    case 'BrandManagement':
      return '品牌管理'
    case 'ProductNameManagement':
      return '商品名称管理'
    case 'UnitManagement':
      return '单位管理'
    case 'MarketingWordManagement':
      return '营销词管理'
    case 'SystemConfigManagement':
      return '系统配置'
    case 'DataCleanTasks':
      return '数据清洗'
    case 'BrandExtractor':
      return '品牌提取工具'
    case 'ItemManagement':
      return '商品列表'
    default:
      return ''
  }
}

// 处理用户菜单命令
const handleCommand = (command) => {
  if (command === 'logout') {
    store.dispatch('logout')
    router.push('/login')
    ElMessage.success('已退出登录')
  }
}
</script>

<style lang="scss" scoped>
.dashboard-layout {
  height: 100vh;
  display: flex;

  .sidebar {
    width: 240px;
    background-color: #304156;
    display: flex;
    flex-direction: column;

    .logo {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      h2 {
        margin: 0;
      }
    }

    .sidebar-menu {
      flex: 1;
      border-right: none;
      background-color: transparent;

      :deep(.el-menu-item) {
        color: #bfcbd9;

        &.is-active {
          color: #409eff;
          background-color: #263445;
        }

        &:hover {
          background-color: #263445;
        }

        .el-icon {
          margin-right: 12px;
        }
      }
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;

    .header {
      height: 60px;
      background-color: #fff;
      border-bottom: 1px solid #dcdfe6;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-menu {
        .user-info {
          display: flex;
          align-items: center;
          cursor: pointer;

          .el-avatar {
            margin-right: 8px;
          }
        }
      }
    }

    .content {
      flex: 1;
      padding: 20px;
      overflow: auto;
    }
  }
}
</style> 